import React, { Component } from 'react';
// 引入轮播图
import { Carousel, WingBlank } from 'antd-mobile';
import { Flex, WhiteSpace } from 'antd-mobile';
import axios from 'axios';

// 把本地图片引入进来
// 图片只能这样引入吗
import nav1 from "../assets/images/nav-1.png";
import nav2 from "../assets/images/nav-2.png";
import nav3 from "../assets/images/nav-3.png";
import nav4 from "../assets/images/nav-4.png";

// 引入局部样式
import indexCss from './index.module.scss'


class Index extends Component {

  state = {
    swiperList:[],
    imgHeight: 176,
    // 导航数组
    navList:[
      {nav:nav1,title:"整租"},
      {nav:nav2,title:"合租"},
      {nav:nav3,title:"地图找房"},
      {nav:nav4,title:"去出租"}
    ],
    groupList:[],
    newsList:[]
  }

  componentDidMount() {
    //  获取轮播图数据
    axios.get("http://157.122.54.189:9060/home/swiper").then(res => {
       this.setState({
          swiperList:res.data.body
       });
    })

    // 获取租房小组数据
    axios.get('http://157.122.54.189:9060/home/groups').then(res => {
      this.setState({
        groupList:res.data.body
      });
    })

    // 获取最新资讯
    axios.get('http://157.122.54.189:9060/home/news').then(res => {
      this.setState({
        newsList:res.data.body
      });
    })
  }

  render() {
    const { swiperList,navList,groupList,newsList } = this.state;
    return (
      <div className={indexCss.container}>
        {/* 轮播图 begin */}
        {/* <WingBlank> 这个是轮播图两边留白 */}
         {/* <WingBlank> */}
          {/* 因为获取数据前页面就渲染出来，所以需要用条件渲染判断 */}
          {swiperList.length && <Carousel
            autoplay={false}
            infinite
            className={indexCss.swiperWapper}
          >
            {swiperList.map(val => (
              <a
                key={val.id}
                href="http://www.alipay.com"
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={`http://157.122.54.189:9060${val.imgSrc}`}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>}
        {/* </WingBlank> */}
        {/* 轮播图 end */}

        {/* 导航栏 begin */}
          <div className={indexCss.nav} >
            { navList.map(v => 
                <div key={v.title} className={indexCss.navItem}>
                  <img src={v.nav} alt=""/>
                  <span>{v.title}</span>
                </div>
              )
            }
          </div>
        {/* 导航栏 end */}

        {/* 租房小组 begin */}
        {groupList.length > 0 && 
        <div>
          <div className={indexCss.title}>
            <span>租房小组</span>
            <a href="#">更多</a>
          </div>
          <div className={indexCss.group}>
            {
              groupList.map(v => 
              <div className={indexCss.groupItem} key={v.title}>
                 <div className={indexCss.word}>
                   <p>{v.title}</p>
                   <p>{v.desc}</p>
                 </div>
                 <div className={indexCss.pic}>
                   <img src={`http://157.122.54.189:9060${v.imgSrc}`} alt=""/>
                 </div>
              </div>
              )
            }
          </div>
        </div>
        }
        {/* 租房小组 end */}

        {/* 最新资讯 begin */}
        <div className={indexCss.news}>
          <div className={indexCss.title}>最新资讯</div>
          <div className={indexCss.content}>
            {
              newsList.map(v => 
                <div className={indexCss.newsItem} key={v.id}>
                  <div className={indexCss.pic}>
                     <img src={`http://157.122.54.189:9060${v.imgSrc}`} alt=""/>
                  </div>
                  <div className={indexCss.desc}>
                    <div className={indexCss.title}>{v.title}</div>
                    <div className={indexCss.other}>
                      <span>{v.from}</span>
                      <span>{v.date}</span>
                    </div> 
                  </div>
                </div>
              )
            }
          </div>
        </div>
        {/* 最新资讯 end */}

        {/* 搜索框 begin */}
        <div className={indexCss.searchWapper}>
            <div className={indexCss.left}>
              <div className={indexCss.chooseArea}>
                <span>北京</span>
                <i className="iconfont icon-arrow" style={{color: '#666'}}></i>
              </div>
              <div className={indexCss.inputWapper}>
                <i className="iconfont icon-seach" style={{position:'absolute',left:'5px',top:'6px',color:'#666'}}></i>
                <input type="text" value="" readOnly placeholder="请输入小区或地址"/>
              </div>
            </div>
            <div className={indexCss.right}>
              <i className="iconfont icon-map" style={{fontSize:'24px',color:'#fff'}}></i>
            </div>
        </div>
        {/* 搜索框 end */}
      </div>
    );
  }
}
export default Index;